<template>
    <div class="detailPageCss">
      <div class="titleCss">{{ $route.query.id ? '' : '创建'}}监督文书</div>
      <div class="bodyCss">
        <el-form ref="form" :model="formData" label-width="140px">
          <el-row>
            <el-form-item label="监督对象">
              <el-select v-model="formData.data1" placeholder="请选择" style="width:240px;">
                <el-option
                  v-for="item in data1Options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="文书类型">
              <el-select v-model="formData.data2" placeholder="请选择" style="width:240px;">
                <el-option
                  v-for="item in data2Options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="文书内容">
              <HealthAdminiLawEnforcementDoc/>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <div class="bottomBtnCss">
        <el-button @click="goBackBtn">返回</el-button>
        <el-button type="primary" @click="confirmBtn">确认</el-button>
        <el-button type="primary" @click="confirmAndPrintBtn">确认并打印</el-button>
      </div>
    </div> 
  </template>
  
  <script>
  import { getSelectOptionsFun } from '@/utils/business.js'
  import HealthAdminiLawEnforcementDoc from './components/healthAdminiLawEnforcementDoc'
  export default {
    components:{HealthAdminiLawEnforcementDoc},
    data(){
      return{
        formData:{
          data1:null,
          data2:null,
          data3:null,
        },
        data1Options:[],
        data2Options:[],
      }
    },
    mounted(){
      this.data1Options = getSelectOptionsFun()
      this.data2Options = getSelectOptionsFun()
    },
    methods:{
      confirmAndPrintBtn(){
  
      },
      confirmBtn(){
        this.$router.back()
      },
      goBackBtn(){
        this.$router.back()
      },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .detailPageCss{
    overflow: hidden;
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    height: calc( 100vh - 66px - 40px);
    display: flex;
    flex-direction: column;
    .titleCss{
      text-align: center;
      font-size: 18px;
      font-weight: bold;
    }
    .bodyCss{
      margin-top: 40px;
      width: calc( 100% - 40px);
      padding-right: 20px;
      margin-left: 10px;
      height: calc( 100% - 120px);
      overflow-y: auto;
      padding-bottom: 40px;
    }
    .bottomBtnCss{
      margin-top: auto;
      text-align: right;
    }
  }
  </style>